<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:400px;">
<div class="flex ac-table-head" style="justify-content:flex-start;">
    <div class="ac-table-title">{{ugroup.title}}</div>
    <div class="ac-table-oper"><el-button size="medium"  v-if="ugroup.operVisible.add" @click="ugroup_openUgroupAdd()" :disabled="ugroup.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="ugroup.operVisible.edit" @click="ugroup_editUgroupAdd()" :disabled="ugroup.operDisabled.edit"  type="text"     native-type="button">编辑(E)</el-button>
<el-button size="medium"  v-if="ugroup.operVisible.del" @click="ugroup_delete()" :disabled="ugroup.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="ugroup.data" size="mini" ref="ugroup"
       
    height="100%"
    @current-change="ugroup_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="name" label="小组名称"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.name}}
   </template>
</el-table-column>
<el-table-column prop="remark" label="描述"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.remark}}
   </template>
</el-table-column>

</el-table>

</div>

          
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 402px);">
<div class="flex ac-table-head" style="justify-content:flex-start;">
    <div class="ac-table-title">{{ugroupUsers.title}}</div>
    <div class="ac-table-oper"><el-button size="medium"  v-if="ugroupUsers.operVisible.add" @click="ugroupUsers_openSelectUgroupUser()" :disabled="ugroupUsers.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="ugroupUsers.operVisible.del" @click="ugroupUsers_delete()" :disabled="ugroupUsers.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="ugroupUsers.data" size="mini" ref="ugroupUsers"
       
    height="100%"
    @current-change="ugroupUsers_currentChange">
    <el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="username" label="用户账户"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.username}}
   </template>
</el-table-column>
<el-table-column prop="fullname" label="用户全名"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.fullname}}
   </template>
</el-table-column>
<el-table-column prop="phone" label="电话"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.phone}}
   </template>
</el-table-column>
<el-table-column prop="email" label="邮箱"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.email}}
   </template>
</el-table-column>

</el-table>

</div>

          
</div>

<el-dialog :visible.sync="selectUgroupUser.visible" :title="selectUgroupUser.title"
            width="50%"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;height:400px;">
                <div class="flex ac-table-head">
    <div class="ac-table-oper"><el-form :inline="true" label-position="left" :model="selectUgroupUser.operData" size="mini" class="searchForm" @submit.native.prevent="selectUgroupUser_load">
<el-form-item v-if="selectUgroupUser.operVisible.keyWord"><el-input type="text" v-model="selectUgroupUser.operData.keyWord" clearable placeholder="用户名/用户全名"  @keyup.enter.native="selectUgroupUser_load"></el-input>
</el-form-item>
<el-form-item v-if="selectUgroupUser.operVisible.query"><el-button size="medium"  v-if="selectUgroupUser.operVisible.query" @click="selectUgroupUser_()" :disabled="selectUgroupUser.operDisabled.query"  type="text"     native-type="button">查询(Q)</el-button>
</el-form-item>

</el-form>
</div>
    <div></div>
</div>
<div class="ac-table-content2">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="selectUgroupUser.data" size="mini" ref="selectUgroupUser"
       
    height="100%"
    @current-change="selectUgroupUser_currentChange">
    <el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="username" label="用户名"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.username}}
   </template>
</el-table-column>
<el-table-column prop="fullname" label="用户全名"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.fullname}}
   </template>
</el-table-column>
<el-table-column prop="email" label="邮箱"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.email}}
   </template>
</el-table-column>
<el-table-column prop="phone" label="电话"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.phone}}
   </template>
</el-table-column>

</el-table>

</div>
<div class="flex">
    <div></div>
    <div> <el-pagination
      @size-change="selectUgroupUser_pageSizeChange"
      @current-change="selectUgroupUser_pageCurrentChange"
      :current-page="selectUgroupUser.pagingData.currentPage"
      :page-sizes="selectUgroupUser.pagingData.pageSizes"
      :page-size="selectUgroupUser.pagingData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="selectUgroupUser.pagingData.total"
       
      >
    </el-pagination>
</div>
</div>
            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="selectUgroupUser_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="selectUgroupUser_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="ugroupAdd.visible" :title="ugroupAdd.title"
            width="50%"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""  :show-message="false"  label-width="80px" label-position="right"
     size="mini" ref="ugroupAdd" :model="ugroupAdd.data" :rules="ugroupAdd.rules"  
     :disabled="ugroupAdd.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="ugroupAdd.itemVisible.name">
    <el-form-item prop="name" label="小组名称">
        
<el-input type="text" size="mini"  v-model="ugroupAdd.data.name" placeholder="小组名称" :disabled="ugroupAdd.itemDisabled.name"  @keyup.enter.native="ugroupAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="ugroupAdd.itemVisible.remark">
    <el-form-item prop="remark" label="描述">
        
<el-input type="text" size="mini"  v-model="ugroupAdd.data.remark" placeholder="描述" :disabled="ugroupAdd.itemDisabled.remark"  @keyup.enter.native="ugroupAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="ugroupAdd_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="ugroupAdd_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"ugroup":{"title":"用户小组","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{"add":true,"edit":true,"del":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"ugroupUsers":{"title":"小组成员","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{"add":true,"del":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"selectUgroupUser":{"visible":false,"title":"选择用户","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{"currentPage":1,"total":0,"pageSize":20,"pageSizes":[10,20,30,40,50,100]},"operData":{"keyWord":""},"operVisible":{"keyWord":true,"query":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"ugroupAdd":{"visible":false,"title":"用户小组","data":{},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{"name":true,"remark":true},"itemDisabled":{},"transfer":{},"rules":{"name":[{"required":true,"message":"请输入小组名称","trigger":"blur"}]}}}
            },
            watch: {
},
            methods: {
ugroup_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.ugroup.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.ugroup.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
ugroupUsers_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.ugroupUsers.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.ugroupUsers.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
ugroupAdd_load:function(){
    let that = this;
    HttpApi.queryObject("sysUgroup",this.ugroupAdd.operData,function(res){
        that.ugroupAdd.data = res;
    });
},
selectUgroupUser_pageCurrentChange:function(currentPage){
    this.selectUgroupUser.pagingData.currentPage=currentPage;
    this.selectUgroupUser_load();
}
,
ugroup_openUgroupAdd:function(){
    let that = this;
    this.ugroupAdd.editorForm = false;
    let param = {};
    this.ugroupAdd_dialogOpen(param,function(dialogData){
       
        HttpApi.saveProvider("sysUgroup",dialogData,function(res){
            that.$message.success("操作成功！");
            that.ugroup.data.push(res);
            that.$refs.ugroup.setCurrentRow(res);
            that.ugroupAdd.visible = false;
        });
    })
},
selectUgroupUser_pageSizeChange:function(pageSize){
    this.selectUgroupUser.pagingData.pageSize=pageSize;
    this.selectUgroupUser_load();
}
,
selectUgroupUser_change:function(fieldName,row){
    HttpApi.updateProvider("sysOrganUsers",fieldName,row,function(){
                        
    });
},
ugroup_delete: function(){
    let that = this;
    let id=this.ugroup.currentRow.id;
    if(!id){
        that.$alert("请选择要删除的数据");
    }
    
    HttpApi.delProviderConfirm("sysUgroup", this.ugroup.currentRow,function(res){
        let index = that.ugroup.data.findIndex(function(item){
            return item.id==id;
        });
            
        that.ugroup.data.splice(index,1);
        if(that.ugroup.data.length==0){
            that.$data.ugroup.currentRow = that.$options.data().ugroup.currentRow;
            that.$refs.ugroup.setCurrentRow();
        }else if(that.ugroup.data.length>index){
            that.$refs.ugroup.setCurrentRow(that.ugroup.data[index]);
        }else{
            that.$refs.ugroup.setCurrentRow(that.ugroup.data[index-1]);
        }
        that.$message.success("删除成功");
    });
},
ugroupAdd_dialogOk:function(){
    let that = this;
    this.$refs.ugroupAdd.validate(function(valid){
        if(valid){
            that.ugroupAdd.callback(that.ugroupAdd.data);
        }else{
            return false;
        }
    });
},
selectUgroupUser_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.selectUgroupUser.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.selectUgroupUser.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
selectUgroupUser_pageSizeChange1:function(pageSize){
    this.selectUgroupUser.pagingData.pageSize=pageSize;
    this.selectUgroupUser_load();
}
,
selectUgroupUser_pageCurrentChange1:function(currentPage){
    this.selectUgroupUser.pagingData.currentPage=currentPage;
    this.selectUgroupUser_load();
}
,
ugroup_currentChange:function(currentRow){
    if(currentRow){
        this.ugroup.currentNodeKey=currentRow.id;
        this.ugroup.currentRow = currentRow;
            this.ugroupUsers.operData.ugroupId=this.ugroup.currentRow.id;
this.ugroupUsers_load();

    }else{
        this.$data.ugroup.currentNodeKey=this.$options.data().ugroup.currentNodeKey;
        this.$data.ugroup.currentRow = this.$options.data().ugroup.currentRow;
        this.$data.ugroupUsers.operData=this.$options.data().ugroupUsers.operData;
this.$data.ugroupUsers.data=this.$options.data().ugroupUsers.data;

    }
    this.ugroup_operCtrl(currentRow);
},
selectUgroupUser_load:function() {
    let that = this;
    let param = {};
    param.pagingData = this.selectUgroupUser.pagingData;
    param.operData = this.selectUgroupUser.operData;

    HttpApi.post("/platform/ugroup/selectUserNotInUgroup", param, function(res) {
        that.selectUgroupUser.pagingData = res.pagingData;
        that.selectUgroupUser.data = res.data;
        if (that.selectUgroupUser.data.length > 0) {
            that.$refs.selectUgroupUser.setCurrentRow(that.selectUgroupUser.data[0]);
            that.selectUgroupUser_operCtrl(that.selectUgroupUser.data[0]);
        } else {
            that.$refs.selectUgroupUser.setCurrentRow();
            that.selectUgroupUser_operCtrl();
        }
    });
},
ugroupAdd_dialogOpen:function(param,callback){
    this.$data.ugroupAdd.data = this.$options.data().ugroupAdd.data;
    this.$data.ugroupAdd.operData = this.$options.data().ugroupAdd.operData;
    for(let val in param) {
        this.$set(this.ugroupAdd.data, val, param[val])
    }
    this.ugroupAdd.callback=callback;
    this.ugroupAdd.visible = true;
}
,
ugroup_load:function(){
    let that = this;
    HttpApi.queryArray("sysUgroup",this.ugroup.operData,function(res){
        that.ugroup.data  = res;
        if(that.ugroup.data.length>0){
            that.$refs.ugroup.setCurrentRow(that.ugroup.data[0]);
            that.ugroup_operCtrl(that.ugroup.data[0]);
        }else{
             that.$refs.ugroup.setCurrentRow();
             that.ugroup_operCtrl();
        }
    });
},
selectUgroupUser_dialogCancel:function(){
     this.selectUgroupUser.visible = false;
},
ugroupUsers_openSelectUgroupUser:function() {
    let that = this;
    if (!this.ugroup.currentRow.id) {
        this.$alert("请先选中一条用户小组信息");
        return;
    } else {
        this.selectUgroupUser_dialogOpen(this.ugroupUsers.operData, function(dialogData) {
            dialogData.forEach(function(item, index) {
                if (item.id) {
                    delete item.id;
                }
                item.ugroupId = that.ugroupUsers.operData.ugroupId;
            });
            HttpApi.saveBatchProvider("sysUgroupUsers", dialogData, function(res) {
                that.selectUgroupUser.visible = false;
                that.ugroupUsers_load();
            });
        })
    }
},
ugroupUsers_load:function() {
    let that = this;
    HttpApi.queryArray("sysUgroupUsers.sysUsers", this.ugroupUsers.operData, function(res) {
        that.ugroupUsers.data = res;
        if (that.ugroupUsers.data.length > 0) {
            that.$refs.ugroupUsers.setCurrentRow(that.ugroupUsers.data[0]);
            that.ugroupUsers_operCtrl(that.ugroupUsers.data[0]);
        } else {
            that.$refs.ugroupUsers.setCurrentRow();
            that.ugroupUsers_operCtrl();
        }
    });
},
ugroupAdd_dialogCancel:function(){
     this.ugroupAdd.visible = false;
},
ugroupUsers_currentChange:function(currentRow){
    if(currentRow){
        this.ugroupUsers.currentNodeKey=currentRow.id;
        this.ugroupUsers.currentRow = currentRow;
    }else{
        this.$data.ugroupUsers.currentNodeKey=this.$options.data().ugroupUsers.currentNodeKey;
        this.$data.ugroupUsers.currentRow = this.$options.data().ugroupUsers.currentRow;
    }
    this.ugroupUsers_operCtrl(currentRow);
},
ugroup_editUgroupAdd:function(){
    let that = this;
    this.ugroupAdd.editorForm = true;
    if(!this.ugroup.currentRow.id){
        this.$alert("请先选中一条用户小组信息");
        return;
    }else{
        this.ugroupAdd_dialogOpen(this.ugroup.currentRow,function(dialogData){
            HttpApi.saveProvider("sysUgroup",dialogData,function(res){
                let index = that.ugroup.data.findIndex(function(item){
                    return item.id==res.id;
                });
                that.$set(that.ugroup.data, index, res);
                that.$refs.ugroup.setCurrentRow(res);
                that.$message.success("操作成功！");
                that.ugroupAdd.visible = false;
            });
        })
    }
},
selectUgroupUser_currentChange:function(currentRow){
    if(!currentRow){
        //如果没有传入值，则将当前的选中值清空
        this.$data.selectUgroupUser.currentRow = this.$options.data().selectUgroupUser.currentRow;
    }else{
        this.selectUgroupUser.currentRow = currentRow;
    }
    this.selectUgroupUser_operCtrl(currentRow);
},
ugroupUsers_change:function(fieldName,row){
    HttpApi.updateProvider("sysUgroupUsers",fieldName,row,function(){
                        
    });
},
selectUgroupUser_dialogOk:function(){
      let that = this;
      let selection = that.$refs.selectUgroupUser.selection;
      let selLength = selection.length;
      if(selLength==0){
          that.$alert("请至少选择一条数据!");
          return;
      }else{
          this.selectUgroupUser.callback(selection);
      }
},
ugroup_change:function(fieldName,row){
    HttpApi.updateProvider("sysUgroup",fieldName,row,function(){
                        
    });
},
ugroupUsers_delete:function() {
    let that = this;
    let selection = that.$refs.ugroupUsers.selection;
    let selLength = selection.length;
    if (selLength == 0) {
        that.$alert("请勾选要操作的数据");
        return;
    }
    HttpApi.delBatchProviderConfirm("sysUgroupUsers", selection, function(res) {
        for (let i = 0; i < selLength; i++) {
            let index = that.ugroupUsers.data.findIndex(function(item) {
                return item.id == selection[i].id;
            });
            that.ugroupUsers.data.splice(index, 1);
        }

        if (that.ugroupUsers.data.length == 0) {
            that.$data.ugroupUsers.currentRow = that.$options.data().ugroupUsers.currentRow;
            that.$refs.ugroupUsers.setCurrentRow();
        } else {
            that.$refs.ugroupUsers.setCurrentRow(that.ugroupUsers.data[0]);
        }
        that.$message.success("删除成功");
    });
},
ugroupAdd_change:function(fieldName){
    HttpApi.updateProvider("sysUgroup",fieldName,this.ugroupAdd.data,function(){

    });
},
selectUgroupUser_delete:function() {
    let that = this;
    let selection = that.$refs.selectUgroupUser.selection;
    let selLength = selection.length;
    if (selLength == 0) {
        that.$alert("请勾选要操作的数据");
        return;
    }
    HttpApi.delBatchProviderConfirm("sysOrganUsers", selection, function(res) {
        for (let i = 0; i < selLength; i++) {
            let index = that.selectUgroupUser.data.findIndex(function(item) {
                return item.id == selection[i].id;
            });
            that.selectUgroupUser.data.splice(index, 1);
        }

        if (that.selectUgroupUser.data.length == 0) {
            that.$data.selectUgroupUser.currentRow = that.$options.data().selectUgroupUser.currentRow;
            that.$refs.selectUgroupUser.setCurrentRow();
        } else {
            that.$refs.selectUgroupUser.setCurrentRow(that.selectUgroupUser.data[0]);
        }
        that.$message.success("删除成功");
    });
},
selectUgroupUser_dialogOpen:function(param,callback){
    this.$data.selectUgroupUser.data = this.$options.data().selectUgroupUser.data;
    this.$data.selectUgroupUser.operData = this.$options.data().selectUgroupUser.operData;
    this.$data.selectUgroupUser.currentRow = this.$options.data().selectUgroupUser.currentRow;
    for(let val in param) {
        this.$set(this.selectUgroupUser.operData, val, param[val])
    }
    this.selectUgroupUser.callback=callback;
    this.selectUgroupUser.visible = true;
    this.selectUgroupUser_load();
}

},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.ugroup_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
